<template>
    <div>

        <el-menu mode="vertical"  theme="dark" default-active="3-11" class="el-menu-vertical-demo"  v-for="(item,topIndex) in menus">
            <el-menu-item-group :title="item.name">
                <el-menu-item :index="item.id+'-'+itemDown.id" v-for="itemDown in item.downMenu"  v-on:click="getPermissionName(itemDown)">
                <!--<el-menu-item :index="item.id+'-'+itemDown.id" v-for="itemDown in item.downMenu"  v-on:click="currentView='itemDown.permissionName'">-->
                    <i class="el-icon-message" ></i>
                    {{ itemDown.name }}
                </el-menu-item>
            </el-menu-item-group>
        </el-menu>
    </div>

</template>

<script>

    export default {

        created: function () {
            this.getMenus()
        },
        data: function () {
            return{
                menus: {
                    "id": 3,
                    "name": "首1页",
                    "pid": 1,
                    "permissionName": "index",
                    "downMenu": [
                        {
                            "id": 11,
                            "name": "首22页",
                            "permissionName": "index-index",
                            "sort": 1,
                            "permissionCreate": "1",
                            "permissionShow": "1",
                            "permissionEdit": "1",
                            "permissionDestroy": "1"
                        }
                    ]
                }


            }
        },

        methods: {
            getMenus2:
                function () {
                    var vm = this

//                    vm.menuData = ['Thinking...']
                    vm.menus = []

//                    axios.get('/api/jsondata')
                    axios.get('/api/v1/menus')
                        .then(function (response) {
                            vm.menus = (response.data.data)
//                            console.log(response.data.data);
                        })
                        .catch(function (error) {
                            //vm.answer = 'Error! Could not reach the API. ' + error
                        })
                },
            getMenus:function () {

                var vm = this
                vm.menus = []

            var userData = jhTools.axios().get('/api/v1/menus')
                .then(function (response) {
                    // return response.data.data.items
                    vm.menus = (response.data.data)
                })
                .catch(function (error) {
                    //vm.answer = 'Error! Could not reach the API. ' + error
                    // return error;
                    vm.menus = [];

                })

//            return vm.menus;
        },

            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            getPermissionName:function(itemDown) {
                console.log(itemDown.permissionName)
                this.$emit('permissionName',itemDown.permissionName)
//                this.$emit('currentView',itemDown.permissionName)
            }
        }

    }


</script>
